import { defineComponent, inject, computed, ref, watchEffect } from 'vue'
import type { PropType } from 'vue'
import addEdit from '@/basic/addEdit'
import CodeEdit from '@/components/nComponents/CodeEdit'
import type { addEditState, questionSideListState, initFormState } from '@/types/baseConfig'
import {
  NSpace,
  NInputGroup,
  NInput,
  NInputNumber,
  NSelect,
  NSwitch,
  NButton,
  NTable
} from 'naive-ui'
export default defineComponent({
  props: {
    compData: {
      type: Object as PropType<addEditState>,
      default: () => {
        return {}
      }
    }
  },
  emits: ['save'],
  setup(props, { emit }) {
    const $clone = inject('$clone') as <T>(data: T) => T
    const info = ref<addEditState>(addEdit)
    watchEffect(() => {
      if (props.compData) {
        info.value = props.compData
      }
    })
    let timer: any = null
    const handOptions = () => {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      timer = setTimeout(() => {
        clearTimeout(timer)
        timer = null
        emit('save', info.value)
      }, 450)
    }

    const questions = computed(() => {
      const arr = [
        {
          label: 'Id',
          value: 'id'
        }
      ]
      info.value.questions.forEach((el: any) => {
        arr.push({
          label: el.commonForm.labelName,
          value: el.commonForm.labelKey
        })
      })
      return arr
    })
    const handInter = () => {
      if (info.value.initForm) {
        info.value.initForm.push({
          oldKey: '',
          type: 'local',
          newKey: ''
        })
      } else {
        info.value.initForm = [
          {
            oldKey: '',
            type: 'local',
            newKey: ''
          }
        ]
      }
    }
    const handInterAll = () => {
      const arr: initFormState[] = $clone(info.value.questions).map((el: questionSideListState) => {
        return {
          type: 'assembly',
          newKey: el.commonForm.labelKey,
          oldKey: el.commonForm.labelKey
        }
      })
      arr.unshift({
        oldKey: 'id',
        type: 'assembly',
        newKey: 'id'
      })
      info.value.initForm = arr
      handOptions()
    }
    const handDel = (e: number) => {
      if (info.value.initForm) {
        info.value.initForm.splice(e, 1)
      }
      handOptions()
    }

    const methodOptions = [
      {
        label: 'get',
        value: 'get'
      },
      {
        label: 'post',
        value: 'post'
      }
    ]

    const typeOptions = [
      {
        label: '组件',
        value: 'assembly'
      },
      {
        label: '本表',
        value: 'local'
      },
      {
        label: '字符串',
        value: 'string'
      },
      {
        label: '布尔',
        value: 'boolean'
      },
      {
        label: '数值',
        value: 'number'
      }
    ]

    const codeRef = ref()
    const handEditCode = () => {
      codeRef.value.open({
        key: '',
        labelKey: '',
        title: '接口设置&&编辑继承',
        isDesc: false,
        value: {
          addApiConfig: info.value.addApiConfig,
          editApiConfig: info.value.editApiConfig,
          initForm: info.value.initForm
        },
        language: 'json'
      })
    }
    const codeChange = (e: addEditState) => {
      info.value.addApiConfig = e.addApiConfig
      info.value.editApiConfig = e.editApiConfig
      info.value.initForm = e.initForm
      handOptions()
    }
    return () => (
      <>
        <div class="BaseEdit">
          <div class="cell pl-[10px] pr-[10px] flex items-center">
            <i class="esayIcon esayIcon-daima cursor-pointer" onClick={handEditCode}></i>
            <div class="title ml-[5px]">接口管理</div>
          </div>
          <div class="has-scrollbar">
            <div class="nano-content">
              <div class="pl-[10px] pr-[10px]">
                <div class="mt-[20px]">
                  <div class="settingItemTitle">添加接口</div>
                  <div class="edit-input">
                    <NSpace vertical>
                      <NInputGroup>
                        <NSelect
                          v-model:value={info.value.addApiConfig.method}
                          options={methodOptions}
                          placeholder="请求方式"
                          style={{ width: '100px' }}
                          onUpdateShow={handOptions}
                        />
                        <NInput
                          v-model:value={info.value.addApiConfig.api}
                          placeholder="请输入"
                          clearable
                          onBlur={handOptions}
                        />
                      </NInputGroup>
                    </NSpace>
                    <div class="mt-[10px]">
                      <NInput
                        v-model:value={info.value.addApiConfig.tipText}
                        placeholder="成功提示语句"
                        clearable
                        onBlur={handOptions}
                      />
                    </div>
                  </div>
                </div>
                <div class="mt-[20px]">
                  <div class="settingItemTitle">编辑接口</div>
                  <div class="edit-input">
                    <NSpace vertical>
                      <NInputGroup>
                        <NSelect
                          v-model:value={info.value.editApiConfig.method}
                          options={methodOptions}
                          placeholder="请求方式"
                          style={{ width: '100px' }}
                          onUpdateShow={handOptions}
                        />
                        <NInput
                          v-model:value={info.value.editApiConfig.api}
                          placeholder="请输入"
                          clearable
                          onBlur={handOptions}
                        />
                      </NInputGroup>
                    </NSpace>
                    <div class="mt-[10px]">
                      <NInput
                        v-model:value={info.value.editApiConfig.tipText}
                        placeholder="成功提示语句"
                        clearable
                        onBlur={handOptions}
                      />
                    </div>
                  </div>
                </div>
                <div class="mt-[20px]">
                  <div class="settingItemTitle">参数继承</div>
                  <div class="mt-[10px]">
                    <NTable bordered={false} single-line={false}>
                      <thead>
                        <tr>
                          <th>操作</th>
                          <th>类型</th>
                          <th>新key</th>
                          <th>值</th>
                        </tr>
                      </thead>
                      <tbody>
                        {info.value?.initForm &&
                          info.value.initForm.map((row: initFormState, index: number) => (
                            <tr>
                              <td>
                                <span
                                  style={{ color: 'orangered', cursor: 'pointer' }}
                                  onClick={() => handDel(index)}
                                >
                                  删
                                </span>
                              </td>
                              <td>
                                <NSelect
                                  v-model:value={row.type}
                                  style={{ width: '90px' }}
                                  options={typeOptions}
                                  placeholder="请选择"
                                />
                              </td>
                              <td>
                                <NInput
                                  v-model:value={row.newKey}
                                  placeholder="请输入"
                                  style={{ width: '100px' }}
                                />
                              </td>
                              <td>
                                {row.type === 'assembly' ? (
                                  <NSelect
                                    v-model:value={row.oldKey}
                                    options={questions.value}
                                    filterable
                                    placeholder="请选择"
                                  />
                                ) : row.type === 'local' ? (
                                  <NInput
                                    v-model:value={row.oldKey}
                                    placeholder="请输入原key"
                                    clearable
                                  />
                                ) : row.type === 'string' ? (
                                  <NInput
                                    v-model:value={row.oldKey}
                                    placeholder="请输入值"
                                    clearable
                                  />
                                ) : row.type === 'number' ? (
                                  <NInputNumber
                                    v-model:value={row.oldKey}
                                    placeholder="请输入值"
                                    clearable
                                  />
                                ) : row.type === 'boolean' ? (
                                  <NSwitch v-model:value={row.oldKey} />
                                ) : (
                                  '请扩展'
                                )}
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </NTable>
                  </div>
                  <div class="mt-[20px] flex items-center justify-end">
                    <NButton onClick={handOptions}>保存</NButton>
                    <NButton style={{ marginLeft: '10px' }} onClick={handInter}>
                      <span>新增</span>
                    </NButton>
                    <NButton style={{ marginLeft: '10px' }} onClick={handInterAll}>
                      <span>一键全部继承</span>
                    </NButton>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <CodeEdit ref={codeRef} onSave={codeChange} />
      </>
    )
  }
})
